<!DOCTYPE html>
<html lang="cs">
    <head>
	    <meta charset="utf-8">
	    <title>Štatlař (API demo)</title>
	    
	    <style>
            html, body {
                height: auto;
                margin: 0;
                padding: 0;
                font-family: sans-serif;
            }
	    
	        #map-canvas {
	            height: auto;
	            position: absolute;
	            z-index: 1;
	            bottom: 0; left: 0; right: 0; top: 70px;
	        }
	        
	        h1, address {
	            position: absolute;
	            left: 0; top: 0;
	            width: 100%;
	            margin: 0; padding: 0;
	        }
	        
	        h1 {
	            z-index: 4000;
	            background: #678AC7;
	            color: #FFF;
	            height: 70px;
	            line-height: 70px;
	            vertical-align: middle;
	            text-indent: 0.5em;
	            font-size: 190%;
	        }
	        
	        address {
	            color: #FFF;
	            z-index: 5000;
	            width: 100%;
	            font-style: normal;
	            padding: 0.5em 0;
	            text-align: right;
	        }
	        
	        address small {
	            margin-right: 1em;
	            background: #678AC7;
	        }
	        
	        address a {
	            color: #FFF;
	        }
	    </style>
	    
	    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	    <script src="http://maps.google.com/maps/api/js?sensor=false&language=cs&region=CZ&libraries=panoramio"></script>
	    <script>
	        function init() {
                var brno = new google.maps.LatLng(49.2, 16.616667);

                return new google.maps.Map($('#map-canvas')[0], {
                    zoom: 13,
                    center: brno,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            }

            function getKmlUrl() {
                return 'http://147.251.54.136/demo/get-proxy.php?nocache=' + (Math.random() * Math.PI * Math.LOG2E);
            }

            $(document).ready(function() {
                var map = init();
                
                var kmlLayer = new google.maps.KmlLayer(getKmlUrl());
                kmlLayer.setMap(map);
                
                var photoLayer = new google.maps.panoramio.PanoramioLayer();
                photoLayer.setMap(map);
            });
	    </script>
    </head>
    <body>
        <h1>Štatlař (API demo)</h1>
        <div id="map-canvas"></div>
        <address><small>2011, Štatlař team &ndash; <a href="http://code.google.com/p/statlar">http://code.google.com/p/statlar</a></small></address>
    </body>
</html>



